<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户列表demo</title>
		<style>
			table {
				/* 整个表格的边框 */
				border: 1px solid black;
				/* 在浏览器中的宽度 */
				width: 80%;
				/* 内容的字居中 */
				text-align: center;
				/* 表格居中*/
				margin: auto;
			}

			table th,
			table td {
				/* 格子边框 */
				border: 1px solid #696969;
			}
			
			.hideDiv{
				/* //fixed相对浏览器
				//absolute相对父元素
				//relative相对自己 */
				position: fixed;
				/* //四个数字相等 使居中 */
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				/* //内边距 使div更靠中间 */
				padding-top: 10%;
				padding-left:0%;

				/* //设置背景透明 */
				background-color: rgba(182, 193, 206, 0.5);
				/* //元素透明,不透明是1 字也透明了
				// opacity:0.2,
				//使div在最浏览器前显示 盖过其它div */
				z-index: 999;
			}
			.hideDiv table{
				background-color: #E0FFFF;
			}
		</style>
	</head>
	<body>
		<!-- 需求分析 
		2.1页面中的数据必须在data中定义
		2.2ajax请求的结果赋值给data属性 -->
		<div id="app">
			<!-- 用于更新的div 默认隐藏 点击 修改 按钮弹出 -->
			<div class="hideDiv" :style="styleHideDiv">
				<table>
					<tr>
						<th>编号</th>
						<th>姓名</th>
						<th>年龄</th>
						<th>性别</th>
						<th colspan="2">操作</th>
					</tr>
					<tr>
						<td v-text="user.id"></td>
						<td><input type="text" v-model="user.name" /></td>
						<td><input type="text" v-model="user.age" /></td>
						<td><input type="text" v-model="user.sex" /></td>
						<td><button @click="confirm('更新',user)">更新</button></td>
						<td><button @click="hideDiv()">取消</button></td>
					</tr>
				</table>
			</div>

			<table id="d4_t1">
				<tr>
					<td colspan="6">
						<h1>用户列表</h1>
					</td>
				</tr>

				<!-- 添加一条用户数据 不包括id-->
				<tr>
					<td>编号:&nbsp;&nbsp;&nbsp;&nbsp;</td>
					<!-- 在input框输入信息 -->
					<td>姓名:<input type="text" v-model="user.name" /></td>
					<td>年龄:<input type="text" v-model="user.age" /></td>
					<td>性别:<input type="text" v-model="user.sex" /></td>
					<td><button @click="confirm('添加',user)">清空</button></td>
					<!-- 点 取消 清空input框 -->
					<td><button @click="clearUser()">取消</button></td>
				</tr>

				<!-- 用于翻页  -->
				<tr>
					<td colspan="3"></td>
					<td>设置每页条数:<input type="text" v-model.number.lazy="rows" /></td>
					<td><button @click="prePage()">上一页</button></td>
					<td><button @click="nextPage()">下一页</button></td>
				</tr>
			</table>

			<table id="d4_t2">
				<!-- 显示表头 -->
				<tr>
					<th>编号</th>
					<th>姓名</th>
					<th>年龄</th>
					<th>性别</th>
					<th colspan="2">操作</th>
				</tr>

				<!-- 显示内容 -->
				<tr v-for="(user1,index) in userList" v-if="index>=userIndex&&index<userIndex+rows">
					<td v-text="user1.id"></td>
					<td v-text="user1.name"></td>
					<td v-text="user1.age"></td>
					<td v-text="user1.sex"></td>
					<td><button @click="showDiv(user1)">修改</button></td>
					<td><button @click="confirm('删除',user1)">删除</button></td>
				</tr>
			</table>
		</div>

		<script src="../js/axios.js"></script><!-- axios用于使用ajax连接 -->
		<script src="../js/vue.js"></script><!-- 用于使用vue框架 -->
		<script>
			//axios请求前缀
			axios.defaults.baseURL = `http://127.0.0.1:8090`
			/* 绝对不要忘记 VUE 方法里面调用自身资源要用  this */
			const APP = new Vue({
				//不要忘记# .等符号
				el: '#app',
				data: {
					//更新和添加时用于保存用户信息
					user: {
						id: '',
						name: '',
						age: '',
						sex: ''
					},
					emptyUser: {
						id: '',
						name: '',
						age: '',
						sex: ''
					},
					//用于保存用户列表
					userList: [],
					//连接
					url: `/VueAxios/`,
					//每页显示数据的条数
					rows: 5,
					//当前页的第一条数据的的索引
					userIndex: 0,
					//用于更新的div的样式
					styleHideDiv: {
						//值为none是隐藏
						display: `none`
					},
				},
				methods: {
					/* 接下来是获取全部用户的方法 */
					//获取全部用户表
					async getUserList() {
						const {
							data: value
						} = await axios.get(`${this.url}user`)
						this.userList = value
					},
					/* 接下来是修改操作的方法 */
					async update(user) {
						/* 注意传参的具体操作 */
						// this.user = user
						let id = user.id
						let name = user.name
						let age = user.age
						let sex = user.sex
						await axios.put(`${this.url}user/${id}/${name}/${age}/${sex}`)
						this.getUserList()
					},
					//确认是否进行 更新/添加/删除操作
					confirm(confirmWord, user) {
						if (!this.userIsEmpty(user)) {
							let flag = confirm(`确认${confirmWord}?`)
							if (flag == 1) {
								switch (confirmWord) {
									case '添加':
										this.add(user);
										break;
									case '更新':
										this.update(user);
										break;
									case '删除':
										this.delete(user.id);
										break;
								}
							} else {
								// this.user = this.emptyUser
								alert(`未${confirmWord}!!`)
							}
						}
					},
					//更新的确认
					// confirmUpdate() {
					// 	if (!this.userIsEmpty()) {
					// 		let flag = confirm("确认修改?")
					// 		if (flag == 1) {
					// 			this.update(this.user)

					// 		} else {
					// 			alert("未修改!!")
					// 		}
					// 	}
					// },
					/* 接下来是删除的方法 */
					async delete(id) {
						await axios.delete(`${this.url}user/${id}`)
						this.getUserList()
					},
					//删除的确认
					// confirmDelete(id) {
					// 	let flag = confirm("确认删除?")
					// 	if (flag == 1) {
					// 		this.delete(id)
					// 	} else {
					// 		alert("未删除!!")
					// 	}
					// },
					/* 新增相关方法 */
					async add() { //ajax操作
						// let id = this.user.id
						let name = this.user.name
						let age = this.user.age
						let sex = this.user.sex
						await axios.post(`${this.url}user/${name}/${age}/${sex}`)
						this.getUserList()
					},
					//新增的确认
					// confirmAdd() {
					// 	let flag = confirm("确认添加?")
					// 	if (flag == 1) {
					// 		this.add()
					// 	} else {
					// 		alert("未添加!!")
					// 	}
					// },
					//清空this.user内容
					clearUser() {
						this.shallowCopy(this.emptyUser)
					},
					/* 隐藏和显示更新div */
					hideDiv() {
						this.styleHideDiv.display = `none`
						this.clearUser()
						this.getUserList()
					},
					showDiv(user1) {
						this.shallowCopy(user1)
						this.styleHideDiv.display = `block`
					},

					/* 接下来是分页的方法 */
					//上一页
					prePage() {
						if (this.userIndex >= this.rows) {
							this.userIndex -= this.rows
						} else {
							this.userIndex = 0
						}
					},
					//下一页
					nextPage() {
						if (this.userIndex + this.rows < this.userList.length) {
							this.userIndex += this.rows
						}
					},
					/* user的非空判断 除了id外的值不能为空 */
					userIsEmpty(user) {
						let name = user.name
						let age = user.age
						let sex = user.sex
						if (name == '' || age == "" || sex == "") {
							alert("请不要输入空值！！！请重新输入！！！")
							return 1
						} else {
							return 0
						}
					},
					//浅拷贝 拷贝的两个对象中 不能含数组或对象类型 只能含原始类型: 字符串 数值 布尔 以及函数类型
					shallowCopy(user){
						this.user.id = user.id
						this.user.name = user.name
						this.user.age = user.age
						this.user.sex = user.sex
					}
				},
				mounted() { //挂载时 获取列表数据
					this.getUserList()
				}
			})
		</script>
	</body>
</html>
